package myJs.myPkg.rSelect

import japgolly.scalajs.react.CtorType.ChildArg
import japgolly.scalajs.react.vdom.VdomElement
import japgolly.scalajs.react.{Children, JsComponent}
import myJs.myPkg.ReactRef
import org.scalajs.dom
import org.scalajs.dom.{Event, html}
import slinky.readwrite.ObjectOrWritten

import scala.scalajs.js
import scala.scalajs.js.annotation.JSImport
import scala.scalajs.js.|
import cats.effect._
import cats.effect.unsafe.implicits.global
import japgolly.scalajs.react.util.EffectCatsEffect._

object SelectSingle {

  case class Props(
      onChange: js.UndefOr[SelectOption => Unit] = js.undefined,
      options: List[SelectOption],
      placeholder: js.UndefOr[String] = js.undefined,
      name: js.UndefOr[String] = js.undefined,
      value: js.UndefOr[SelectOption] = js.undefined,
      ref: js.UndefOr[ReactRef[html.Select]] = js.undefined
  )

  @js.native
  @JSImport("react-select", JSImport.Default)
  object RawComponent extends js.Object {}

  val Component = JsComponent[ObjectOrWritten[Props], Children.Varargs, Null](RawComponent)

  def apply(
      onChange: SelectOption => SyncIO[Unit],
      options: List[SelectOption],
      placeholder: js.UndefOr[String] = js.undefined,
      name: js.UndefOr[String] = js.undefined,
      value: js.UndefOr[SelectOption] = js.undefined,
      ref: js.UndefOr[ReactRef[html.Select]] = js.undefined
  ) = {
    val useOnChange=(so:SelectOption)=>onChange(so).unsafeRunSync()
    Component(Props(useOnChange, options, placeholder, name, value, ref))()
  }

}
